<template>
    <div>
        <el-input placeholder="请输入" v-model="keyWord" clearable>
            <el-button slot="append" icon="el-icon-search" @click="toSearch"></el-button>
        </el-input>
        <el-tag
                :key="index"
                v-for="(tag,index) in nameList"
                closable
                :disable-transitions="false"
                @close="deleteUser(tag.id,index)">
            {{tag.alias}}
        </el-tag>
        <el-checkbox-group v-model="recipient" @change="handleChecked">
            <el-checkbox v-for="(item,index) in leaderList" :label="item.id" :key="index">{{item.alias}}</el-checkbox>
        </el-checkbox-group>
    </div>
</template>
<script>
    import common from "@/api/common/index"
    export default {
        name: "SelectAnyUser",
        props: {
            value: {
                type: Array,
                default: function () {
                    return []
                }
            }
        },
        data() {
            return {
                keyWord: "",
                nameList: [],
                leaderList: [],
            }
        },
        created() {
            this.getDeptLeaderList()
            this.getAliasById()
        },
        computed: {
            recipient: {
                get() {
                    return this.value;
                },
                set(val) {
                    this.$emit("input", val);
                }
            }
        },
        methods: {
            toSearch() {
                this.getDeptLeaderList(this.keyWord)
                return false
            },
            getAliasById() {
              common.getAliasById({"users": this.recipient}).then(res => {
                    this.nameList = res.data
                })
            },
            getDeptLeaderList(val) {
              common.getAccountSelect({search_value: val}).then(res => {
                    this.leaderList = []
                    let list = res.data.map(item => {
                        if(item.users){
                          this.leaderList = this.leaderList.concat(item.users)
                        }
                    })
                console.log("000000000000000000000",this.leaderList)
                })
            },
            handleChecked(value) {
                this.getAliasById()
            },
            deleteUser(id, index) {
                let list = this.recipient
                for (let i = 0; i < list.length; i++) {
                    if (list[i] == id) {
                        list.splice(i, 1);
                        this.nameList.splice(index, 1);
                        break
                    }
                }
            },
        }
    }
</script>
<style lang="scss" scoped>
    .el-tag {
        margin-right: 10px;
        margin-top: 5px;
    }
    .el-checkbox{
        height: 36px;
        line-height: 36px;
    }
</style>
